<template>
    <div>
        <page-main>
            <!-- 筛选栏 -->
            <search-bar>
                <el-form :model="search" size="small" label-width="80px">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="所属部门">
                                <el-cascader :options="departOptions" clearable :props="{value: 'id', label: 'name', children: 'child'}" style="width: 100%;" @change="deptChange" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </search-bar>
        </page-main>
        <page-main>
            <!-- 批量操作 -->
            <div style="margin-bottom: 20px;">
                <el-button type="primary" size="small" @click="add(null)">新建</el-button>
            </div>
            <!-- 表格 table -->
            <el-table ref="table" v-loading="loading" :data="dataList" border stripe highlight-current-row>
                <el-table-column prop="realname" label="姓名" />
                <el-table-column prop="phone" label="电话" />
                <el-table-column prop="auth" label="权限">
                    <template #default="scope">
                        <span>{{ scope.row.auth | authFilter }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="accept" label="接收线索">
                    <template #default="scope">
                        <span>{{ scope.row.accept | acceptFilter }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态">
                    <template #default="scope">
                        <span>{{ scope.row.status | statusFilter }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="sort_name" label="排序" />
                <el-table-column fixed="right" label="操作" width="160">
                    <template #default="scope">
                        <el-button type="text" size="small" @click="add(scope.row)">编辑</el-button>
                        <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
                        <el-button type="text" size="small" @click="statusChange(scope.row.id)">修改密码</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </page-main>
    </div>
</template>

<script>
import { memberList, delMember, departList } from '@/api/system'
export default {
    name: 'ClueMine',
    filters: {
        acceptFilter(val) {
            const map = {
                0: '不接收',
                1: '接收线索'
            }
            return map[val]
        },
        statusFilter(val) {
            const map = {
                0: '禁用',
                1: '启用'
            }
            return map[val]
        },
        authFilter(val) {
            const map = {
                1: '总管理员',
                2: '管理员',
                3: '员工'
            }
            return map[val]
        }
    },
    data() {
        return {
            loading: false,
            search: {
                dept_id: '',
                pages: 1,
                limit: 10,
                total: 0
            },
            departOptions: [],
            dataList: []
        }
    },
    mounted() {
        this.getOptions();
        this.getList();
    },
    methods: {
        // 删除
        del(id) {
            this.$alert('确定将选中该员工？', '提示', {
                confirmButtonText: '确定',
                showCancelButton: true,
                callback: action => {
                    if (action == 'confirm') {
                        delMember({ id }).then(res => {
                            if (res.status) {
                                this.getList();
                                this.$message({ type: 'success', message: '操作成功！'});
                            }
                        })
                    }
                }
            });
        },
        // 切换分页size
        handleSizeChange(val) {
            this.search.limit = val;
            this.getList();
        },
        // 切换页数
        handleCurrentChange(val) {
            this.search.pages = val;
            this.getList();
        },
        // 重置筛选条件
        handleReset() {
            this.getList();
        },
        // 获取列表
        getList() {
            this.loading = true;
            memberList(this.search).then(res => {
                if (res.status == 1) {
                    this.dataList = res.data.list || [];
                }
                this.loading = false;
            })
        },
        getOptions() {
            departList().then(res => {
                if (res.status == '1') {
                    this.departOptions = res.data.list || []
                }
            })
        },
        deptChange(e) {
            this.search.dept_id = e.length ? e[e.length - 1] : ''
        }
    }
}
</script>
